<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-26 10:07:23
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-27 19:19:08
 * @FilePath: \shangyitong\src\pages\user\ceriification\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-card class="box-card">
		<!-- 实名认证   卡片头部结构 -->
		<template #header>
			<div class="card-header">实名认证</div>
		</template>
		<!-- 实名认证结构提示 -->
		<div class="tip">
			<el-icon><WarningFilled /></el-icon>
			<p>
				完成实名认证后才能
				添加就诊人,正常进行挂号,为了不应影响后续步骤,建议提前实名认证。
			</p>
		</div>
		<div class="bottom">
			<!-- userInfo.authStatus==1 -->
			<div class="bottom_one" v-if="userInfo.authStatus == 1">
				<el-descriptions class="margin-top" title="" :column="1" border>
					<!-- <template #extra>
						<el-button type="primary">Operation</el-button>
					</template> -->
					<el-descriptions-item width="50">
						<template #label>
							<div class="cell-item">
								<el-icon>
									<user />
								</el-icon>
								用户姓名
							</div>
						</template>
						{{ userInfo.name || '鲁大海' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								证件类型
							</div>
						</template>
						<el-tag type="success">
							{{
								userInfo.certificatesType == '10'
									? '身份证'
									: '户口本'
							}}</el-tag
						>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								证件号码
							</div>
						</template>
						{{
							userInfo.certificatesNo ||
							'111111111111111111111111'
						}}
					</el-descriptions-item>
					<!-- <el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<iphone />
								</el-icon>
								电话号码
							</div>
						</template>
						{{  '2023-06-10 下午' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<location />
								</el-icon>
								就诊医院
							</div>
						</template>
						{{  '北京人民医院' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<tickets />
								</el-icon>
								就诊科室
							</div>
						</template>
						<el-tag size="small">{{
							 '多发性硬化专科门诊'
						}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								医生职称
							</div>
						</template>
						{{'副主任医师' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								服务费用
							</div>
						</template>
						<span style="color: red"
							>{{  '100元' }}
						</span>
					</el-descriptions-item>
					
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								挂号时间
							</div>
						</template>
						{{'2023-06-15 10:52:17' }}
					</el-descriptions-item> -->
				</el-descriptions>
			</div>
			<!-- 用户未实名认证的结构 userInfo.authStatus==0 -->
			<div class="bottom_two" v-if="userInfo.authStatus == 0">
				<el-form
					ref="ruleFormRef"
					class="formClass"
					label-width="80px"
					:model="userParams"
					:rules="rules"
				>
					<el-form-item label="用户姓名" prop="name">
						<el-input
							v-model="userParams.name"
							placeholder="请输入用户姓名"
						></el-input>
					</el-form-item>
					<el-form-item label="证件类型" prop="certificatesType">
						<el-select
							v-model="userParams.certificatesType"
							placeholder="选择证件类型"
						>
							<el-option
								v-for="item in certificationTypeOption"
								:key="item.id"
								:label="item.name"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码" prop="certificatesNo">
						<el-input
							v-model="userParams.certificatesNo"
							placeholder="请输入用户姓名"
						></el-input>
					</el-form-item>
					<!-- //action上传图片 服务器接口地址
                 limit照片前墙约束图片个数
                 on-exceed:超出约束数量的钩子
                -->
					<el-form-item label="证件上传" prop="certificatesUrl">
						<el-upload
							ref="upLoad"
							action="/api/oss/file/fileUpload?fileHost=userAuah"
							list-type="picture-card"
							:limit="1"
							:on-exceed="onExceed"
							:on-success="onSuccess"
							:on-preview="onPreview"
							:on-remove="onRemove"
						>
							<img
								src="@/assets/images/auth_example.png"
								alt=""
								style="
									width: 100%;
									height: 100%;
									border-radius: 10px;
								"
							/>
						</el-upload>
						<el-dialog v-model="dialogVisivle">
							<img
								v-if="userParams.certificatesUrl"
								w-full
								:src="userParams.certificatesUrl"
								alt="Preview Image"
								style="width: 100%; height: 100%"
							/>
						</el-dialog>
					</el-form-item>
					<el-form-item>
						<div class="btnBox">
							<el-button
								type="primary"
								size="samll"
								:plain="true"
								@click="reset"
								>重写</el-button
							>
							<el-button
								type="primary"
								size="samll"
								@click="submit"
								>提交</el-button
							>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {
	reqUserInfo,
	reqCertificationType,
	reqUserCatification,
} from '@/api/user/index'
import type {
	UserInfoResponseData,
	CertificationTypeResoponse,
	CertifiCationArr,
	UserParams,
} from '@/api/user/type'
import { ElMessage } from 'element-plus'
//存储用户信息
let userInfo = ref<any>({
	// name:"",//姓名
	// certificatesType:"",//10 身份证 20 户口本
	// certificatesNo:"",//身份证号码
	// certificatesUrl:"",//身份证url
	// phone:"",//电话
	// status:"",//是否已经实名认证 0 未认证 1已认证
})
let certificationTypeOption = ref<CertifiCationArr>([])
//收集用户认证数据
let userParams = reactive<UserParams>({
	certificatesType: '',
	certificatesNo: '',
	certificatesUrl: '',
	name: '',
})
//定义组件上传实例
let upLoad = ref<any>()
//控制预览图片dialog敞口显示和隐藏
let dialogVisivle = ref<boolean>(false)
//定义自定义表单验证规则
//@ts-ignore
const validateName = (rule: any, value: any, callback: any) => {
	let reg =
		/^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/
	if (reg.test(value)) {
		callback()
	} else {
		callback(new Error('请输入正确格式的名字'))
	}
}
//@ts-ignore
const validateCerType = (rule: any, value: any, callback: any) => {
	if (value == '10' || value == '20') {
		callback()
	} else {
		callback(new Error('请输入证件类型'))
	}
}
//@ts-ignore
const validateCerNo = (rule: any, value: any, callback: any) => {
	//身份证号码
	let reg =
		/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
	let regBook = /^[A-Za-z]{1,2}[0-9]{6}([0-9A-Z])?$/ //户口本编号正则
	if (
		(userParams.certificatesType == '10' && reg.test(value)) ||
		(userParams.certificatesType == '20' && regBook.test(value))
	) {
		callback()
	} else {
		if (userParams.certificatesType == '10') {
			callback(new Error('请输入正确身份证号码'))
		} else {
			callback(new Error('请输入正确户口本编号'))
		}
	}
}
//@ts-ignore
const validateCerUrl = (rule: any, value: any, callback: any) => {
	if (value.length) {
		callback()
	} else {
		callback(new Error('请上传证件照图片'))
	}
}
//定义整个表单实例对象
let ruleFormRef = ref()
const rules = {
	name: [{ validator: validateName, required: true, trigger: 'blur' }],
	certificatesType: [
		{ validator: validateCerType, required: true, change: 'blur' },
	],
	certificatesNo: [
		{ validator: validateCerNo, required: true, trigger: 'blur' },
	],
	certificatesUrl: [
		{ validator: validateCerUrl, required: true, trigger: 'blur' },
	],
}
onMounted(() => {
	getUserInfo()
	//获取证件类型的方法
	getCertificationType()
})
const getUserInfo = async () => {
	let result: UserInfoResponseData = await reqUserInfo()
	if (result.code == 200) {
		// console.log(result);
		userInfo.value = result.data
	}
}

const getCertificationType = async () => {
	let result: CertificationTypeResoponse = await reqCertificationType()
	if (result.code == 200) {
		// console.log("first",result)
		certificationTypeOption.value = result.data
	}
}
//用户认证事件回调
const submit = async () => {
	//对整个表单进行校验
	//全部表单验证通过返回一个成功的promise
	//如果有一个表单验证失败 返回的是失败的promise,后面的语句不再执行
	await ruleFormRef.value.validate()
	try {
		await reqUserCatification(userParams)
		ElMessage({
			type: 'success',
			message: '认证成功',
		})
		//重新获取一下用户信息
		getUserInfo()
	} catch (error) {
		ElMessage({
			type: 'error',
			message: '认证失败',
		})
	}
}
//重写方法
const reset = () => {
	Object.assign(userParams, {
		certificatesType: '',
		certificatesNo: '',
		certificatesUrl: '',
		name: '',
	})
	//清除已上传的图片列表
	upLoad.value.clearFiles()
}
//上传照片超出约束数量的钩子
const onExceed = () => {
	ElMessage({
		type: 'error',
		message: '只能上传一张图片',
	})
}
//图片上传成功是的钩子
//@ts-ignore
const onSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
	//收集上传图片的url
	//response
	// console.log("first",response,uploadFile,uploadFiles)
	// "http://server.atguigu.cn:9000/shequ/20250627/不惧风雨终会有光.png"
	if (response.code == 200) {
		userParams.certificatesUrl = response.data
		//如果照片上传成功 清除上传图片的校验结果
		ruleFormRef.value.clearValidate('certificatesUrl')
	}
}
//照片墙预览的钩子
//@ts-ignore
const onPreview = (uploadFile: any) => {
	// console.log(uploadFile)
	dialogVisivle.value = true
}
//照片墙删除图片的钩子
const onRemove = () => {
	userParams.certificatesUrl = ''
}
</script>

<style lang="scss" scoped>
.box-card {
	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		p {
			margin-left: 10px;
		}
	}
	.bottom {
		margin-top: 20px;
		.bottom_two {
			width: 100%;
			.formClass {
				width: 60%;
				margin: 20px auto;
			}
		}
	}
}
</style>
